Clone the Project Repository

This lab requires multiple HTML interface files, which have been pre-created for you. You will need to clone the folder structure to the IDE interface using the following command in a terminal shell.

1
git clone https://github.com/ibm-developer-skills-network/obmnl-flask_assignment.git

When the command is successfully executed, the Project tab must have the folder structure as shown in the image. The root folder, obmnl-flask_assignment should have the templates folder and a file app.py. The templates folder has all the required HTML files, edit.html, form.html, and transactions.html. Throughout this lab, you will implement the required functions in app.py.

Initial set up

In the app.py file, you need to import necessary modules from Flask and instantiate the Flask application.
For this lab, you will need to import the following functions from the flask library.

Flask - to instantiate the application
request - to process the GET and POST requests
url_for - to access the url for a given function using its decorator
redirect - to redirect access requests according to requirement
render_template - to render the html page

After importing the functions, instantiate the application to a variable app.

Click here for hint

1
from flask import <functions>

Click here for solution

1
2
3
4
5
# Import libraries
from flask import Flask, redirect, request, render_template, url_for
# Instantiate Flask functionality
app = Flask(__name__)

Now, the code will look like this:
Correct code reference

Next, let's create a list of sample transactions for testing purposes. You can assume that the transactions already exist on the interface when it is executed for the first time. Please note that this step is completely optional and does not affect the functionality you will develop in this lab. Add the code snippet as shown below to app.py.

1
2
3
4
5
6
# Sample data
transactions = [
    {'id': 1, 'date': '2023-06-01', 'amount': 100},
    {'id': 2, 'date': '2023-06-02', 'amount': -200},
    {'id': 3, 'date': '2023-06-03', 'amount': 300}
]

Click here for solution

Sample data

The order in which you will develop the functions is as follows:
1. Read
2. Create
3. Update
4. Delete
The reason to implement Read before the other functions is to be able to redirect to the page with all transactions every time a new transaction is created, updated, or deleted. Therefore, the function to read the existing transactions must exist before the others are implemented.

Create Operation

For the Create operation, you will implement a route that allows users to add new transactions. This will involve handling both GET and POST HTTP requests - GET for displaying the form to the user and POST for processing the form data sent by the user.

Here is the list of steps to implement the Create operation.

Create a function named add_transaction.
Use add as the decorator for this function. Make sure to pass both GET and POST as possible methods.
If the request method is GET, use the render_template function to display an HTML form using a template named form.html. This form will allow users to input data for a new transaction.
If the request method is POST, use request.form to extract the form data, create a new transaction, append it to the transactions list, and then use redirect and url_for to send the user back to the list of transactions.
The new transaction is passed on to the reading function in the following format.

1
2
3
4
5
transation = {
              'id': len(transactions)+1
              'date': request.form['date']
              'amount': float(request.form['amount'])
             }

Here, request.form function parses the information received from the entry made in the form.

Click here for hint

The add_transaction function content needs the following implementations.

For POST method, create the new transaction as shown above, append it to the existing list of transactions and redirect to the URL for Read operation.

For GET method, render the form.html page that accepts the information from the interface.

Click here for solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Create operation: Display add transaction form
# Route to handle the creation of a new transaction
@app.route("/add", methods=["GET", "POST"])
def add_transaction():
    # Check if the request method is POST (form submission)
    if request.method == 'POST':
        # Create a new transaction object using form field values
        transaction = {
            'id': len(transactions) + 1,            # Generate a new ID based on the current length of the transactions list
            'date': request.form['date'],           # Get the 'date' field value from the form
            'amount': float(request.form['amount']) # Get the 'amount' field value from the form and convert it to a float
        }
        # Append the new transaction to the transactions list
        transactions.append(transaction)
        # Redirect to the transactions list page after adding the new transaction
        return redirect(url_for("get_transactions"))
    
    # If the request method is GET, render the form template to display the add transaction form
    return render_template("form.html")

Now, the code will look like this:
Correct code

Note: The statements outside the if case are, by default, the else case. The statements in the if case end with a return statement; hence only one of the two cases will run at a time.

Finishing Steps and Running the Application

Check if the current script is the main program (that is, it wasn't imported from another script) with the conditional if __name__ == "__main__":.

If the condition is true, call app.run(debug=True) to start the Flask development server with debug mode enabled. This will allow you to view detailed error messages in your browser if something goes wrong.

1
2
3
# Run the Flask app
if __name__ == "__main__":
    app.run(debug=True)

Now, the code will look like this:
Correct code reference

The code is now complete. Run the file app.py from a terminal shell using the command:

1
python3.11 app.py

By default, Flask launches the application on LocalHost:5000. As displayed in the image,

Launch the application by going to the Skills Network Library, going to Launch Application.
Enter 5000 in the port number and launch the application window.

The final application looks like this.

ezgif com-video-to-gif

Practice Exercises

The following are some practice exercises for the interested learners. We are not providing the solutions for these exercises to encourage the learners to try them on their own. Please feel free to use the course discussion forum for sharing your opinions on the solution with other interested learners.

Exercise 1: Search Transactions

In this exercise, you will add a new feature to the application that allows users to search for transactions within a specified amount range. You will create a new route called /search that handles both GET and POST requests in app.py.
Correct code reference

Instructions:

Create a new function named search_transactions and use the @app.route decorator to map it to the URL /search.
Inside the function, check if the request method is POST. If it is, retrieve the minimum and maximum amount values from the form data submitted by the user. Convert these values to floating-point numbers.
Filter the transactions list based on the amount range specified by the user. Create a new list, filtered_transactions, that contains only the transactions whose amount falls within the specified range. You can use a list comprehension for this.
Pass the filtered_transactions list to the transactions.html template using the render_template function. In this template, display the transactions similar to the existing transactions.html template.
If the request method is GET, render a new template called search.html. This template should contain a form that allows users to input the minimum and maximum amount values for the search.

Exercise 2: Total Balance

In this exercise, you will add a new feature that calculates and displays the total balance of all transactions. You will create the route in app.py.
Correct code reference

Instructions:

Create a new function named total_balance and use the @app.route decorator to map it to the URL /balance.
Inside the function, calculate the total balance by summing the amount values of all transactions in the transactions list.
Return the total balance as a string in the format “Total Balance: {balance}”.
To display the total balance, you do not need to create a new template. Instead, you will modify the transactions.html template to include the total balance value at the bottom of the table.
After displaying the list of transactions in the transactions.html template, add a new row to display the total balance. You can use the same render_template function as before, passing both the transactions list and the total balance value.

Date	Version	Changed by	Change Description
2023-07-24	2.0	Steve Hord	QA pass with edits
2023-07-15	1.0	Vicky Kuo	Initial version created

Hands-on Lab: CRUD Application Design using Additional Features in Flask

Overview

Objectives

Clone the Project Repository

Initial set up

Read Operation

Create Operation

Update Operation

Delete Operation

Finishing Steps and Running the Application

Lab Help

Testing the Interface

Practice Exercises

Exercise 1: Search Transactions

Exercise 2: Total Balance

Conclusion

Author(s)

Additional Contributor

Changelog

© IBM Corporation 2023. All rights reserved.